<template>
  <view class="container">
    <!-- 顶部图片 -->
    <view style="background-image: url(../../../static/tabBar/top.png);width: 100%;height: 300rpx;"></view>

    <!-- 查询交费 -->
    <view class="center-container">
      <view class="rounded-box plate-number-input">
        <text>请输入车牌号</text>
        
        <!-- 车牌号输入框 -->
        <view class="inputs custom-input-class">
          <view :class="'inputs-item custom-item-class ' + (currentInput === 0 ? 'item-active' : '')" @tap="showProvinceBoard">{{ plateNumber[0] }}</view>
          <view :class="'inputs-item custom-item-class ' + (currentInput === 1 ? 'item-active' : '')" @tap="showAreaBoard">{{ plateNumber[1] }}</view>
          <view class="split">·</view>
          <view :class="'inputs-item custom-item-class ' + (currentInput === 2 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="2">{{ plateNumber[2] }}</view>
          <view :class="'inputs-item custom-item-class ' + (currentInput === 3 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="3">{{ plateNumber[3] }}</view>
          <view :class="'inputs-item custom-item-class ' + (currentInput === 4 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="4">{{ plateNumber[4] }}</view>
          <view :class="'inputs-item custom-item-class ' + (currentInput === 5 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="5">{{ plateNumber[5] }}</view>
          <view :class="'inputs-item custom-item-class ' + (currentInput === 6 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="6">{{ plateNumber[6] }}</view>
          <view :class="'inputs-item custom-item-class ' + (currentInput === 7 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="7">
            <text class="new" v-if="!plateNumber[7] && !isNewEnergy">+</text>
            <text v-else>{{ plateNumber[7] }}</text>
          </view>
        </view>
        
        <!-- 查询并交费按钮 - 始终保持激活状态 -->
        <button class="query-pay-button" @click="queryAndPay">查询并交费</button>
      </view>
    </view>

    <!-- 温馨提示 -->
    <view class="warm-tip">
      <text>温馨提示：请缴费后15分钟内离场，否则系统将重新计费</text>
    </view>

    <!-- 功能图标区 -->
    <view class="rounded-box function-icons">
      <view class="icon-item" @click="viewPaymentRecords">
        <image class="icon" src="../../../static/tabBar/jfjl.png"></image>
        <text>缴费记录</text>
      </view>
      <view class="icon-item" @click="manageVehicles">
        <image class="icon" src="../../../static/tabBar/clgl.png"></image>
        <text>车辆管理</text>
      </view>
      <view class="icon-item" @click="issueInvoice">
        <image class="icon" src="../../../static/tabBar/kjfp.png"></image>
        <text>开具发票</text>
      </view>
      <view class="icon-item" @click="enableAutoPay">
        <image class="icon" src="../../../static/tabBar/mmzf.png"></image>
        <text>免密支付</text>
      </view>
      <view class="icon-item" @click="contactCustomerService">
        <image class="icon" src="../../../static/tabBar/lxkf.png"></image>
        <text>联系客服</text>
      </view>
    </view>

    <!-- 会员停车权益说明 - 添加点击事件 -->
    <view class="rounded-box member-rights" @click="showRightsPanel">
      <text>会员停车权益说明</text>
    </view>
    
    <!-- 会员权益面板 - 默认隐藏 -->
    <view class="rights-panel" :class="{ 'show-panel': rightsPanelVisible }">
      <view class="panel-header">
        <text class="panel-title">会员停车权益说明</text>
        <view class="close-btn" @click="hideRightsPanel">×</view>
      </view>
      <view class="panel-content" v-html="formatLineBreaks(memberRights)"></view>
    </view>
    
    <!-- 客服联系面板 - 默认隐藏 -->
    <view class="customer-service-panel" :class="{ 'show-panel': customerServicePanelVisible }">
      <view class="panel-header">
        <view class="close-btn" @click="hideCustomerServicePanel">×</view>
      </view>
      <view class="panel-content customer-service-content">
        <view class="contact-methods">
          <!-- 统一样式的电话联系 -->
          <button class="contact-method" @click="callCustomerService">
            <view class="method-icon">
              <image src="../../../static/tabBar/contactPhone.png" mode="aspectFit"></image>
            </view>
            <view class="method-info">
              <text class="method-detail">{{contactPhone}}</text>
            </view>
          </button>
          
          <!-- 统一样式的在线留言（微信客服） -->
          <button class="contact-method" open-type="contact" hover-class="contact-hover">
            <view class="method-icon">
              <image src="../../../static/tabBar/zxly.png" mode="aspectFit"></image>
            </view>
            <view class="method-info">
              <text class="method-detail">在线留言</text>
            </view>
          </button>
        </view>
      </view>
    </view>

    <!-- 虚拟键盘 -->
    <view class="keyboard" v-if="keyboardVisible">
      <view class="keyboardClose">
        <view class="keyboardClose_btn" @tap="closeKeyboard">关闭</view>
      </view>
      
      <!-- 省份简写键盘 -->
      <view class="keyboard-item" v-if="keyboardType === 1">
        <view class="keyboard-line" v-for="(item, index) in provinces" :key="index">
          <view class="keyboard-btn" :data-val="itemlist" @tap="chooseProvince" v-for="(itemlist, index1) in item" :key="index1">
            {{ itemlist }}
          </view>
        </view>
        <view class="keyboard-del" @tap="delProvince">
          <text>清除</text>
        </view>
      </view>
      
      <!-- 地区简写键盘 -->
      <view class="keyboard-item" v-if="keyboardType === 2">
        <view class="keyboard-line" v-for="(item, index) in areas" :key="index">
          <view class="keyboard-btn" :data-val="itemlist" @tap="chooseArea" v-for="(itemlist, index1) in item" :key="index1">
            {{ itemlist }}
          </view>
        </view>
        <view class="keyboard-del" @tap="delArea">
          <text>清除</text>
        </view>
      </view>
      
      <!-- 普通类型键盘 -->
      <view class="keyboard-item" v-if="keyboardType === 3">
        <view class="keyboard-line" v-for="(item, index) in numbers" :key="index">
          <view class="keyboard-btn" :data-val="itemlist" @tap="chooseNumber" v-for="(itemlist, index1) in item" :key="index1">
            {{ itemlist }}
          </view>
        </view>
        <view class="keyboard-del" @tap="delNumber">
          <text>清除</text>
        </view>
      </view>
      
      <!-- 最后一位键盘 -->
      <view class="keyboard-item" v-if="keyboardType === 4">
        <view class="keyboard-line" v-for="(item, index) in last" :key="index">
          <view class="keyboard-btn" :data-val="itemlist" @tap="chooseLast" v-for="(itemlist, index1) in item" :key="index1">
            {{ itemlist }}
          </view>
        </view>
        <view class="keyboard-del" @tap="delLast">
          <text>清除</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getMemberCarByCarNum, getCarOrderOfJS, getParkConfigList,judgeParkIn,judgeParkInNotLog} from '@/api/parking.js';
import { getPhoneApi } from '@/api/user';
export default {
  data() {
    return {
      memberRights: '', // 会员权益说明
      plateNumber: Array(8).fill(''),
      currentInput: 0, // 从0开始输入
      keyboardVisible: false,
      keyboardType: 1, // 默认显示省份键盘
      isNewEnergy: false,
      memberCar: false,
      attributes: {}, // 存储订单属性
      orderInfo:{},//完整的订单信息
      rightsPanelVisible: false, // 会员权益面板显示状态
      customerServicePanelVisible: false, // 客服联系面板显示状态
      // 省份输入
      provinces: [
        ['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
        ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
        ['桂', '琼', '渝', '川', '贵', '云', '藏'],
        ['陕', '甘', '青', '宁', '新']
      ],
      // // 地区输入
      // areas: [
      //   ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'],
      //   ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'],
      //   ['W', 'X', 'Y', 'Z']
      // ],
      // // 车牌输入
      // numbers: [
      //   ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
      //   ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'],
      //   ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'],
      //   ['W', 'X', 'Y', 'Z']
      // ],
      // // 最后一位输入
      // last: [
      //   ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
      //   ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'],
      //   ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'],
      //   ['W', 'X','Y', 'Z','港', '澳', '学', '挂', '警']
      // ]

      // 地区输入 - 按电脑键盘布局排列
      areas: [
        // 第一行: QWERTYUIOP
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
        // 第二行: ASDFGHJKL
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
        // 第三行: ZXCVBNM
        ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
      ],
      // 车牌输入 - 按电脑键盘布局排列
      numbers: [
        // 数字键区: 1234567890
        ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
        // 第一行字母: QWERTYUIOP
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
        // 第二行字母: ASDFGHJKL
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
        // 第三行字母: ZXCVBNM
        ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
      ],
      last: [
        // 数字键区: 1234567890
        ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
        // 第一行字母: QWERTYUIOP
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
        // 第二行字母: ASDFGHJKL
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
        // 第三行字母: ZXCVBNM
        ['Z', 'X', 'C', 'V', 'B', 'N', 'M'],
        // 特殊字符单独一行
        ['港', '澳', '学', '挂', '警']
      ],
      contactPhone:''


    };
  },
  created() {
    this.plateNumber[0] = '苏';
  },
  computed: {
    // 按钮不再需要禁用状态
    btnDisabled() {
      return false;
    }
  },
  onLoad() {
    // 先判断是否登录
    // const openid = uni.getStorageSync('openid');
    // if(openid == null && openid == '' &&  openid == undefined && openid == 'undefined'){
      let params = {
        parkId: "p240199697"
      }
      getParkConfigList(params).then(res => {
        if (res.total > 0) {
          this.memberRights = res.rows[0].memberRights;
          console.log('获取规则:', res);
          this.contactPhone = res.rows[0].contactPhone;
        }
      })
      .catch(err => {
        console.log('获取规则失败:', err);
      });
    // }
  },
  methods: {
    // 转换换行符为<br>标签
    formatLineBreaks(text) {
      if (!text) return '';
      return text.replace(/\n/g, '<br>');
    },

    // 显示/隐藏面板
    showRightsPanel() {
      this.rightsPanelVisible = true;
      uni.pageScrollTo({ scrollTop: 0, duration: 300 });
    },
    hideRightsPanel() {
      this.rightsPanelVisible = false;
    },
    showCustomerServicePanel() {
      this.customerServicePanelVisible = true;
      uni.pageScrollTo({ scrollTop: 0, duration: 300 });
    },
    hideCustomerServicePanel() {
      this.customerServicePanelVisible = false;
    },
    
    // 键盘操作
    closeKeyboard() {
      this.keyboardVisible = false;
    },
    showProvinceBoard() {
      this.keyboardVisible = true;
      this.currentInput = 0;
      this.keyboardType = 1;
    },
    chooseProvince(event) {
      const { val } = event.currentTarget.dataset;
      this.$set(this.plateNumber, 0, val);
      this.currentInput = 1;
      this.keyboardType = 2;
    },
    delProvince() {
      this.$set(this.plateNumber, 0, '');
      this.currentInput = 0;
      this.keyboardType = 1;
    },
    showAreaBoard() {
      this.keyboardVisible = true;
      this.currentInput = 1;
      this.keyboardType = 2;
    },
    chooseArea(event) {
      const { val } = event.currentTarget.dataset;
      this.$set(this.plateNumber, 1, val);
      this.currentInput = 2;
      this.keyboardType = 3;
    },
    delArea() {
      this.$set(this.plateNumber, 1, '');
      this.currentInput = 1;
      this.keyboardType = 2;
    },
    showNumberBoard(event) {
      const { index } = event.currentTarget.dataset;
      const keyboardType = index === 6 || index === 7 ? 4 : 3;
      this.keyboardVisible = true;
      this.currentInput = index;
      this.keyboardType = keyboardType;
      if (index === 7 && !this.isNewEnergy && !this.plateNumber[7]) {
        this.isNewEnergy = true;
      }
    },
    chooseNumber(event) {
      const { val } = event.currentTarget.dataset;
      this.$set(this.plateNumber, this.currentInput, val);
      if (this.currentInput === 6 && !this.isNewEnergy) this.keyboardType = 4;
      else if (this.currentInput === 7 && this.isNewEnergy) this.keyboardType = 4;
      if (this.currentInput < 7) this.currentInput++;
      else this.keyboardVisible = false;
    },
    delNumber() {
      this.$set(this.plateNumber, this.currentInput, '');
      if (this.currentInput === 1) this.keyboardType = 2;
      else if (this.currentInput > 1) this.keyboardType = 3;
      if (this.currentInput > 0) this.currentInput--;
    },
    chooseLast(event) {
      const { val } = event.currentTarget.dataset;
      this.$set(this.plateNumber, this.currentInput, val);
      if (this.currentInput < 7) this.currentInput++;
      else this.keyboardVisible = false;
    },
    delLast() {
      this.$set(this.plateNumber, this.currentInput, '');
      if (this.currentInput > 0) this.currentInput--;
      if (this.currentInput < 6) this.keyboardType = 3;
      else this.keyboardType = 4;
    },

    // 订单相关
    memberExsist(param) {
      return new Promise((resolve, reject) => {
        getMemberCarByCarNum({ carNum: param })
          .then(res => {
            this.memberCar = res.data > 0;
            resolve(this.memberCar);
          })
          .catch(err => reject(err));
      });
    },
    getOrderInfo(carNum) {
      return new Promise((resolve, reject) => {
        getCarOrderOfJS({ carNo: carNum })
          .then(res => {
            if (res.code === 200 && res.data.length > 0) {
              this.orderInfo = res.data[0];
              this.attributes = res.data[0].attributes;
              resolve(this.attributes);
            } else {
              uni.showToast({ title: '未查询到订单信息', icon: 'none' });
            }
          })
          .catch(err => {
            console.error('查询订单失败', err);
            uni.showToast({ title: '查询订单失败，请重试', icon: 'none' });
            reject(err);
          });
      });
    },
    validatePlateNumber(plateNumber) {
      if (!plateNumber[0] || !plateNumber[1]) return false;
      for (let i = 2; i < 7; i++) {
        if (plateNumber[i]) return true;
      }
      return false;
    },
    queryAndPay() {
      const openid = uni.getStorageSync('openid');
      const phone = uni.getStorageSync('phone');

      // 同时判断openid和phone是否存在
      if (
        openid == null || 
        openid == '' || 
        openid == undefined || 
        openid == 'undefined' ||
        phone == null || 
        phone == '' || 
        phone == undefined || 
        phone == 'undefined'
      ) {
          uni.showModal({
          title: '提示',
          content: '会员登录享受更多优惠，是否前往登录页面？',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({ url: '/pages/users/wechat_login/index' });
            } else {
              if (!this.validatePlateNumber(this.plateNumber)) {
                uni.showToast({ title: '请输入正确的车牌号', icon: 'none' });
                return;
              }
              const carNum = this.plateNumber[0] + '-' + this.plateNumber.slice(1).join('').replace(/\s/g, '');
              let params = { carNum };
              uni.showLoading({ title: '查询中...' });
              judgeParkInNotLog(params)
                .then(res => {
                  if (res.code == 200 && res.msg == '未找到入场记录') { 
                    uni.showToast({ title: res.msg ,icon:'none'});
                    return;
                  }
                  uni.hideLoading();
                  setTimeout(() => {
                    this.getOrderInfo(carNum)
                      .then(attributes => {
                        if(attributes.retcode == "2"){
                          uni.showModal({ title: '未查询到该车辆的入场信息！' });
                        }else{
                          const openid = "000000";
                          const phone =  "000000";
                          console.log('打印传递过去的attributes:', attributes);

                          uni.navigateTo({
                            url: `/pages/parking/checkstand_pay_no/index?carNum=${encodeURIComponent(carNum)}&memberCar=${this.memberCar}&openid=${openid}&phone=${phone}&attributes=${encodeURIComponent(JSON.stringify(attributes))}`
                          });
                        }
                      })
                      .catch(err => {
                        console.error('获取订单信息失败:', err);
                        uni.showToast({ title: '获取订单信息失败', icon: 'none' });
                      });
                  }, 500);
                })
                .catch(err => {
                  uni.hideLoading();
                  if(err.code == 4001 || err.msg.indexOf("5个")>-1){
                    uni.showToast({ title: err.msg ,icon:'none'});
                  }
                });
            }
          }
        });
        return;
      }else if((typeof openid )!= "string"){
        uni.navigateTo({ url: '/pages/users/wechat_login/index' });
      }else{
        if (!this.validatePlateNumber(this.plateNumber)) {
          uni.showToast({ title: '请输入正确的车牌号', icon: 'none' });
          return;
        }
        const carNum = this.plateNumber[0] + '-' + this.plateNumber.slice(1).join('').replace(/\s/g, '');
        let params = { carNum, openid, memberPhone: phone };
        uni.showLoading({ title: '查询中...' });
        judgeParkIn(params)
          .then(res => {
            if (res.code == 200 && res.msg == '未找到入场记录') { 
              uni.showToast({ title: res.msg ,icon:'none'});
              return;
            }
            uni.hideLoading();
            setTimeout(() => {
              this.getOrderInfo(carNum)
                .then(attributes => {
                  if(attributes.retcode == "2"){
                    uni.showModal({ title: '未查询到该车辆的入场信息' });
                  }else{
                    uni.navigateTo({
                      url: `/pages/parking/checkstand_pay/index?carNum=${encodeURIComponent(carNum)}&memberCar=${this.memberCar}&attributes=${encodeURIComponent(JSON.stringify(attributes))}`
                    });
                  }
                })
                .catch(err => {
                  console.error('获取订单信息失败:', err);
                  uni.showToast({ title: '获取订单信息失败', icon: 'none' });
                });
            }, 3000);
          })
          .catch(err => {
            uni.hideLoading();
            if(err.code == 4001){
              if(err.msg.indexOf("车牌已被会员绑定")>-1){
                uni.showModal({
                  title: '提示',
                  content: '车牌绑定的会员与当前用户不一致，无法享受会员优惠，是否直接交费？',
                  success: (res) => {
                    if (res.confirm) {
                      setTimeout(() => {
                        this.getOrderInfo(carNum)
                          .then(attributes => {
                            if(attributes.retcode == "2"){
                              uni.showModal({ title: '未查询到该车辆的入场信息' });
                            }else{
                              const openid = uni.getStorageSync('openid');
                              const phone = uni.getStorageSync('phone');
                              uni.navigateTo({
                                url: `/pages/parking/checkstand_pay_no/index?carNum=${encodeURIComponent(carNum)}&memberCar=${this.memberCar}&openid=${openid}&phone=${phone}&attributes=${encodeURIComponent(JSON.stringify(attributes))}`
                              });
                            }
                          })
                          .catch(err => {
                            console.error('获取订单信息失败:', err);
                            uni.showToast({ title: '获取订单信息失败', icon: 'none' });
                          });
                      }, 3000);
                    }
                  }
                });
              }else{
                uni.showToast({ title: err.msg ,icon:'none'});
              }
            }else if(err.msg.indexOf("5个")>-1){
              uni.showToast({ title: err.msg ,icon:'none'});
            }
          });
      }
    },
    
    // 页面导航
    viewPaymentRecords() {
      uni.navigateTo({ url: '/pages/parking/payment_records/index' });
    },
    formatDateTime(date = new Date()) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hour = String(date.getHours()).padStart(2, '0');
      const minute = String(date.getMinutes()).padStart(2, '0');
      const second = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    async manageVehicles() {
      // try {
      //   const phone = uni.getStorageSync('phone');
      //   if (!phone) {
      //     await this.getPhoneApi();
      //     const updatedPhone = uni.getStorageSync('phone');
      //     if (!updatedPhone) return;
      //   }
      //   uni.navigateTo({ url: '/pages/parking/car_manage/index' });
      // } catch (err) {
      //   console.error('管理车辆流程异常', err);
      //   uni.showToast({ title: '操作失败，请稍后重试', icon: 'none' });
      // }
      const phone = uni.getStorageSync('phone');
      if (!phone) {
        uni.showModal({
          title: '提示',
          content: '登录后可查看车辆管理，是否前往登录页面？',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({ url: '/pages/users/wechat_login/index' });
            }
          }
        });
      }else{
        uni.navigateTo({ url: '/pages/parking/car_manage/index' });
      }
    },
    issueInvoice() {

      const openid = uni.getStorageSync('openid');
      if (!openid) {
        uni.showModal({
          title: '提示',
          content: '登录后可查看开具发票，是否前往登录页面？',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({ url: '/pages/users/wechat_login/index' });
            }
          }
        });
      }else{
        uni.navigateTo({ url: '/pages/parking/issue_invoice/index' });
      }
      
    },
    enableAutoPay() {
      uni.navigateTo({ url: '/pages/parking/payment_records/index' });
    },
    contactCustomerService() {
      this.showCustomerServicePanel();
    },
    async getPhoneApi() {
      try {
        const res = await getPhoneApi();
        uni.setStorageSync('phone', res.data.phone);
      } catch (err) {
        if (err.msg === '未登录') {
          const shouldLogin = await this.showLoginConfirmModal();
          if (shouldLogin) {
            uni.navigateTo({ url: '/pages/users/wechat_login/index' });
          }
        }
      }
    },
    // 客服功能
    callCustomerService() {
      uni.makePhoneCall({
        phoneNumber: this.contactPhone,
        success: () => console.log('拨打电话成功！'),
        fail: () => console.log('拨打电话失败！'),
      });
      this.hideCustomerServicePanel();
    },
    showLoginConfirmModal() {
      return new Promise((resolve, reject) => {
        uni.showModal({
          title: '提示',
          content: '您尚未登录，是否前往登录页面？',
          success: (res) => resolve(res.confirm),
          fail: () => resolve(false),
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
  z-index: 1;
}

.center-container {
  width: 95%;
  margin: 0 auto;
  padding: 20rpx 0;
}

.top-image {
  width: 100%;
  height: 300rpx;
  display: block;
}

.cart_nav {
  position: fixed;
  @include main_bg_color(theme);
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
}

.rounded-box {
  background-color: rgba(255, 255, 255, 1.00);
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.member-rights{
  float: right;
  background-color: transparent !important;
}

.inputs {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 150rpx auto 80rpx auto;
  justify-content: center;
}

.split {
  font-weight: bold;
  font-size: 48rpx;
  margin: 0 10rpx;
}

.inputs-item {
  border: 1rpx solid #8d8d8d;
  border-radius: 12rpx;
  margin: 10rpx;
  width: 68rpx;
  font-size: 48rpx;
  text-align: center;
  height: 86rpx;
  line-height: 86rpx;
}

.item-active {
  border: 2rpx solid #ff6e00;
  color: #ff6e00;
}

.keyboard {
  position: fixed;
  bottom: 0;
  background-color: #d1d5d9;
  width: 100%;
  left: 0;
  padding: 10rpx 0;
  z-index: 1000;
  box-sizing: border-box;
}

.keyboardClose {
  height: 70rpx;
  background-color: #f7f7f7;
  overflow: hidden;
  padding: 0 20rpx;
}

.keyboardClose_btn {
  float: right;
  line-height: 70rpx;
  font-size: 15px;
}

.keyboard-line {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 5rpx 10rpx;
  box-sizing: border-box;
  margin: 0 auto;
  width: 99%;
}

.keyboard-btn {
  font-size: 32rpx;
  color: #333333;
  background: #fff;
  text-align: center;
  box-shadow: 0 2rpx 0 0 #999999;
  border-radius: 10rpx;
  margin: 5rpx;
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 0 60rpx;
  max-width: 60rpx;
}

.keyboard-del {
  font-size: 32rpx;
  color: #333333;
  background: #a7b0bc;
  display: inline-block;
  padding: 0;
  box-shadow: 0 2rpx 0 0 #999999;
  border-radius: 10rpx;
  margin: 5rpx;
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  position: absolute;
  bottom: 15rpx;
  right: 15rpx;
}

.plate-number-suggest {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}

.plate-number-suggest text {
  margin-right: 10rpx;
  background-color: #f5f5f5;
  padding: 5rpx 10rpx;
  border-radius: 5rpx;
}

.query-pay-button {
  width: 85%;
  height: 90rpx;
  background-color: #ff6666;
  color: white;
  border: none;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38rpx;
  margin: 20rpx auto;
  opacity: 1;
  cursor: pointer;
}

.warm-tip {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  color: #ff3333;
  padding: 20rpx;
  background-color: #fffbe6;
  border-radius: 16rpx;
}

.function-icons {
  display: flex;
  justify-content: space-around;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon {
  width: 50rpx;
  height: 50rpx;
}

.new {
  color: #999;
  text-align: center;
  font-size: 36rpx;
  width: 100%;
  vertical-align: top;
}

/* 会员权益面板样式 */
.rights-panel, .customer-service-panel {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  max-height: 80vh;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  z-index: 999;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: bottom 0.3s ease;
  overflow: hidden;
}

.rights-panel.show-panel, .customer-service-panel.show-panel {
  bottom: 0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.panel-title {
  font-size: 36rpx;
  font-weight: bold;
  margin:0 auto;
}

.close-btn {
  font-size: 48rpx;
  color: #999;
  padding: 10rpx;
}

.panel-content {
  padding: 30rpx;
  font-size: 28rpx;
  line-height: 1.6;
  overflow-y: auto;
  max-height: calc(80vh - 120rpx);
}

/* 客服联系面板样式 - 统一电话和客服样式 */
.customer-service-panel {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  max-height: 80vh;
  border-radius: 20rpx 20rpx 0 0;
  z-index: 999;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: bottom 0.3s ease;
  overflow: hidden;
}

.customer-service-panel.show-panel {
  bottom: 0;
}

.customer-service-content {
  padding: 40rpx 20rpx;
}

.contact-methods {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 20rpx 0;
}

/* 统一的联系方式样式 */
.contact-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 45%;
  padding: 30rpx 0;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  position: relative;
  border: none;
  background: none;
  margin: 0;
  padding: 0;
}

.contact-method::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1rpx;
  background-color: #eee;
}

.contact-method:last-child::after {
  display: none;
}

.method-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.method-icon image {
  width: 60rpx;
  height: 60rpx;
}

.method-info {
  text-align: center;
}

.method-detail {
  font-size: 26rpx;
  color: #666;
}

/* 按钮样式重置，使其与view外观一致 */
button.contact-method {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 45%;
}

button.contact-method::after {
  border: none;
}

button.contact-method .method-icon,
button.contact-method .method-info {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 微信客服按钮hover效果 */
.contact-hover {
  background-color: #f0f0f0;
}

/* 重点：客服面板头部布局调整 */
.customer-service-panel .panel-header {
  justify-content: flex-end; /* 关闭按钮居右 */
  padding: 15rpx 20rpx; /* 调整内边距 */
}
</style>